<template>
  <div class="loading">
    <div class="loader"></div>
  </div>
</template>
<script setup lang="ts"></script>
<style scoped>
.loader {
  width: 40px;
  height: 20px;
  --m: no-repeat linear-gradient(90deg, #000 70%, #0000 0);
  -webkit-mask: var(--m) calc(0 * 100% / 10) 100% / calc(100% / 10)
      calc(1 * 100% / 10),
    var(--m) calc(1 * 100% / 10) 100% / calc(100% / 10) calc(2 * 100% / 10),
    var(--m) calc(2 * 100% / 10) 100% / calc(100% / 10) calc(3 * 100% / 10),
    var(--m) calc(3 * 100% / 10) 100% / calc(100% / 10) calc(4 * 100% / 10),
    var(--m) calc(4 * 100% / 10) 100% / calc(100% / 10) calc(5 * 100% / 10),
    var(--m) calc(5 * 100% / 10) 100% / calc(100% / 10) calc(6 * 100% / 10),
    var(--m) calc(6 * 100% / 10) 100% / calc(100% / 10) calc(7 * 100% / 10),
    var(--m) calc(7 * 100% / 10) 100% / calc(100% / 10) calc(8 * 100% / 10),
    var(--m) calc(8 * 100% / 10) 100% / calc(100% / 10) calc(9 * 100% / 10),
    var(--m) calc(9 * 100% / 10) 100% / calc(100% / 10) calc(10 * 100% / 10);
  background: linear-gradient(#514b82 0 0) left/0% 100% no-repeat #ddd;
  animation: l14 2s infinite steps(10);
  animation-play-state: running; /* 默认状态为运行 */
}

@keyframes l14 {
  0% {
    background-size: 0% 100%;
  }
  50% {
    background-size: 120% 100%; /* 波浪形状的高峰 */
  }
  100% {
    background-size: 0% 100%;
  }
}
</style>
